<template>
    <section>
        <el-col :span="24">
            <el-upload class="avatar-uploader" action="/api/tool/fileImport" :show-file-list="false" style="margin-bottom: 2px;"
                       :headers="uploadHeaders"
                       :data="uploadData"
                       :on-success="(res)=>uploadSuccessHandle(res)"
                       :before-upload="beforeUploadHandle">
                <el-button class="el-icon-upload2" type="info" plain size="mini" :loading="btnLoading">上传文件</el-button>
            </el-upload>
            <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="attachData" :max-height="height" border stripe size="mini" v-loading="loading">
                <el-table-column align="center" label="删除" width="60">
                    <template slot-scope="scope">
                        <el-button type="text" class="el-icon-delete" @click="delBtn(scope.$index)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="下载" width="100" align="center">
                    <template slot-scope="{row}">
                        <el-button class="el-icon-download" type="text" @click="downloadFile(row.url, row.name)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" align="center">
                    <template slot-scope="{row}">
                        <div>
                            <span>{{row.name}}</span>
                            <el-image :src="row.url" :preview-src-list="[row.url]" style="height: 20px;vertical-align: middle;float: right"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" width="100" align="center"></el-table-column>
                <el-table-column label=""></el-table-column>
            </el-table>
        </el-col>
    </section>
</template>

<script>

import {downloadImg} from "@/libs/tools";
import {getToken} from "../../../libs/util";
import {designDetailAttachDel} from "../../../api/bs/design";

export default {
    name: "designAttachEd",
    props: {
        detail: {
            type: Object,
            default: {}
        },
        attachData:{
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            downloadImg,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            user: {},
            nodeActions: [],

            uploadHeaders: {},
            uploadData:{type: 'design_attach', disk: 'file'},
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        delBtn(index){
            this.$confirm(`删除该文件, 此操作将无法恢复, 确认是否继续`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                designDetailAttachDel({id: this.attachData[index]['id']}).then((res) => {
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success(res.msg);
                        this.$emit('getData');
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {

            })
        },
        //下载
        downloadFile(url, name){
            window.open('/api/tool/fileExport'+`?path=${url}&type=url&name=${name}`, '_self');
        },
        //上传之前的检测
        beforeUploadHandle(file) {
            if(!this.detail.number){
                this.$message.warning("缺少款号信息");
                return false;
            }
            this.uploadData.type_no = this.detail.number;
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            this.btnLoading = true;
            return true;
        },
        //上传成功
        uploadSuccessHandle(res) {
            this.btnLoading = false;
            if(res.code === 0){
                this.$message.success("文件已上传，并保存成功");
                this.$emit('getData');
            }else{
                this.$message.error(res.msg);
            }
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
</style>
